<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no" />
	<meta name="msapplication-tap-highlight" content="no" />
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>PDFH5</title>
	<link rel="stylesheet" href="css/style.css" />
	<link href="./pdfh5.png" type="image/x-icon" rel="shortcut icon" />
	<style>
		html,
		body {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		#demo {
			display: block;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="text-wrapper">
			<div class="text part1">
				<span class="letter">
					<div class="character">L</div> <span></span>
				</span>
				<span class="letter">
					<div class="character">o</div> <span></span>
				</span>
				<span class="letter">
					<div class="character">a</div> <span></span>
				</span>
				<span class="letter">
					<div class="character">d</div> <span></span>
				</span>
				<span class="letter">
					<div class="character">i</div> <span></span>
				</span>
				<span class="letter">
					<div class="character">n</div> <span></span>
				</span>
				<span class="letter">
					<div class="character">g</div> <span></span>
				</span>
			</div>
			<div class="how-to"><span>正在加载中，请您耐心等待...</span></div>
		</div>

	</div>
	<div id="demo"></div>
	<script src="./js/pdfh5.js"></script>
	<script src="./vconsole.min.js"></script>
	<script>
		// var vConsole = new VConsole();

		var pdfUrl = "//pdfh5.gjtool.cn/pdfh5/git.pdf";
		// var pdfUrl = "password.pdf";//密码 123456zxcv..
		// var pdfUrl = "pdf/1.pdf";

		if (location.search && location.search.includes("?file=")) {
			pdfUrl = location.search.replace("?file=", "");
			console.log(pdfUrl);
		}

		var pdfh5 = new window.Pdfh5(document.querySelector("#demo"), {
			// ========== 基础配置 ==========
			pdfurl: pdfUrl, // PDF文件地址
			// data: null,  // PDF文件流数据 (与pdfurl二选一)

			// 正常情况下不需要配置下面这些配置，默认就好

			// password: null, // PDF密码（如果有密码保护）
			// goto: 0, // 初始跳转到指定页面（0表示不跳转）

			// ========== 渲染配置 ==========
			// scale: 1.0, // PDF渲染比例 (默认1.0，支持0.1-5.0)
			textLayer: true, // 是否开启文本层，支持复制文本
			// enableHWA: true, // 是否启用硬件加速（默认true）

			// ========== 交互配置 ==========
			// zoomEnable: true, // 是否允许手势缩放
			// scrollEnable: true, // 是否允许滚动
			// resize: true, // 是否允许窗口大小变化时重新渲染
			// backTop: true, // 是否显示回到顶部按钮
			// pageNum: true, // 是否显示页码
			// loadingBar: true, // 是否显示加载进度条

			// ========== 手势缩放配置 ==========
			// tapZoomFactor: 2, // 双击缩放倍数（默认2）
			// zoomOutFactor: 1.2, // 缩放退出因子（默认1.2）
			// animationDuration: 300, // 动画持续时间（毫秒）
			// maxZoom: 4, // 最大缩放倍数
			// minZoom: 0.5, // 最小缩放倍数
			// dampingFactor: 0.85, // 阻尼因子

			// ========== 加载模式配置 ==========
			// 根据文件大小选择加载模式：
			// 小文件（<10MB）：不配置，使用传统加载
			// 中等文件（10-50MB）：lazyLoad: true
			// 大文件（>50MB）：progressiveLoading: true

			// 懒加载模式（中等文件推荐）
			// lazyLoad: true, // 启用懒加载模式
			// maxMemoryPages: 5, // 懒加载模式下最大内存页面数（默认5）

			// 分段加载模式（大文件推荐）
			progressiveLoading: true, // 启用分段加载模式
			// chunkSize: 65536, // 分段大小（字节，默认65536）

			// ========== 性能优化配置 ==========
			// maxImageSize: 8388608, // 最大图片大小（字节，8388608，兼容iOS Safari）
			// canvasMaxAreaInBytes: 8388608, // 最大Canvas面积 iOS Safari浏览器canvas限制约为16777216

			// ========== 资源路径配置 ==========
			// workerSrc: "./pdf.worker.min.js", // PDF.js Worker路径
			// cMapUrl: "../cmaps/", // 字符映射路径
			// standardFontDataUrl: "../standard_fonts/", // 标准字体路径
			// iccUrl: "../iccs/", // ICC配置文件路径
			// wasmUrl: "../wasm/", // WASM文件路径

			// ========== 沙箱安全配置 ==========
			// sandboxEnabled: true, // 是否启用沙箱模式（默认true）
			// sandboxOptions: { // 沙箱配置选项
			//     allowScripts: false, // 是否允许JavaScript执行
			//     allowForms: true, // 是否允许表单交互
			//     allowPopups: false, // 是否允许弹窗
			//     allowSameOrigin: true // 是否允许同源访问
			// },

		});

		// ========== 事件监听示例 ==========
		// PDF加载完成事件
		pdfh5.on('ready', function (data) {
			console.log('PDF加载完成，总页数：', data.totalPages);
		});

		// PDF加载错误事件
		pdfh5.on('error', function (data) {
			console.error('PDF加载失败：', data.message);
		});

		// 页面变化事件
		pdfh5.on('pageChanged', function (data) {
			console.log('当前页面：', data.pageNumber);
		});

		// 缩放变化事件
		pdfh5.on('scaleChanged', function (data) {
			console.log('缩放比例：', data.scale);
		});

		// 缩放事件
		pdfh5.on('zoom', function (data) {
			console.log('缩放：', data.scale);
		});

		// 搜索清除事件
		pdfh5.on('searchCleared', function () {
			console.log('搜索已清除');
		});

		// 打印事件
		pdfh5.on('print', function () {
			console.log('开始打印');
		});

		// 下载事件
		pdfh5.on('download', function (data) {
			console.log('下载文件：', data.filename);
		});


		// 密码取消事件
		pdfh5.on('passwordCancelled', function () {
			console.log('密码输入已取消');
		});

		// 密码错误事件
		pdfh5.on('passwordError', function (data) {
			console.error('密码错误：', data.message);
		});

		// ========== 方法调用示例 ==========
		// 显示PDF
		// pdfh5.show();

		// 隐藏PDF
		// pdfh5.hide();

		// 滚动到指定页面
		// pdfh5.scrollToPage(5);

		// 滚动到顶部
		// pdfh5.scrollToTop();

		// 设置缩放比例
		// pdfh5.setScale(1.5);

		// 获取当前缩放比例
		// var currentScale = pdfh5.getScale();
		// console.log('当前缩放比例：', currentScale);

		// 搜索文本
		// pdfh5.searchText('关键词');

		// 清除搜索
		// pdfh5.clearSearch();

		// 打印PDF
		// pdfh5.print();

		// 下载PDF
		// pdfh5.download('文件名.pdf');


		// 获取密码配置状态
		// var passwordConfig = pdfh5.getPasswordConfig();
		// console.log('密码配置：', passwordConfig);

		// 销毁PDF实例
		// pdfh5.destroy();

		// ========== 事件监听示例 ==========

		// 监听PDF加载完成事件
		pdfh5.on("complete", function (status, msg, time) {
			console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum, msg);
		});

		// 监听滚动事件
		pdfh5.on("scroll", function (data) {
			// console.log("scrollTop:" + data.scrollTop, "currentNum:" + data.currentNum);
		});

		// 监听缩放事件
		pdfh5.on("zoom", function (scale) {
			console.log("当前缩放比例：" + scale);
		});

		// 监听渲染过程
		pdfh5.on("render", function (currentNum, pageTime, totalTime, currentPageDom) {
			console.log("正在渲染第" + currentNum + "页，单页耗时：" + pageTime + "ms，总耗时：" + totalTime + "ms");

			// 调试信息：显示页面尺寸
			if (currentPageDom) {
				var container = currentPageDom;
				var canvas = container.querySelector('canvas');
				if (canvas) {
					console.log("第" + currentNum + "页尺寸 - 容器:", container.style.width, "x", container.style.height, "Canvas:", canvas.style.width, "x", canvas.style.height);
				}
			}

			// 当第一页渲染完成时，隐藏 loading
			if (currentNum === 1) {
				var loadingDiv = document.querySelector("#app");
				if (loadingDiv) {
					loadingDiv.style.opacity = "0";
					loadingDiv.style.transition = "opacity 0.5s ease-out";
					setTimeout(function () {
						loadingDiv.style.display = "none";
					}, 500);
				}
			}
		});

		// 监听回到顶部按钮点击
		pdfh5.on("backTop", function () {
			console.log("回到顶部按钮被点击");
		});

		// 监听显示/隐藏事件
		pdfh5.on("show", function () {
			console.log("PDF显示");
		});

		pdfh5.on("hide", function () {
			console.log("PDF隐藏");
		});

		// ========== 分段加载事件监听 ==========

		// 监听页面加载完成事件（分段加载）
		pdfh5.on("pageLoaded", function (data) {
			// console.log("页面加载完成:", data.pageNum, "内存使用:", data.memoryUsage);
		});

		// 监听页面清理事件（分段加载）
		pdfh5.on("pageCleaned", function (data) {
			// console.log("页面清理完成:", data.pageNum);
		});

		// 监听缩放开始事件
		pdfh5.on("zoomStart", function (data) {
			console.log("开始缩放:", data.scale, "中心点:", data.centerX, data.centerY);
		});

		// 监听缩放结束事件
		pdfh5.on("zoomEnd", function (data) {
			console.log("缩放结束:", data.scale, "缩放变化:", data.scaleChange, "耗时:", data.duration + "ms");
		});

		// 添加窗口resize调试监听
		window.addEventListener('resize', function () {
			console.log("窗口大小变化:", window.innerWidth, "x", window.innerHeight);
			setTimeout(function () {
				var demo = document.querySelector("#demo");
				if (demo) {
					console.log("PDF容器尺寸:", demo.clientWidth, "x", demo.clientHeight);
				}
			}, 100);
		});

		// ========== 方法调用示例 ==========

		// 页面跳转示例
		// pdfh5.goToPage(5);  // 跳转到第5页

		// ========== 分段加载模式下的页面跳转 ==========
		// 分段加载模式支持goto配置和goToPage方法
		// 配置示例：
		// var pdfh5 = new Pdfh5('#demo', {
		//     pdfurl: 'large-pdf.pdf',
		//     progressiveLoading: true,
		//     goto: 10  // 初始跳转到第10页
		// });

		// 动态跳转示例：
		// pdfh5.goToPage(20);  // 跳转到第20页（会自动加载该页面）

		// 缩放控制示例
		// pdfh5.zoomIn();      // 放大
		// pdfh5.zoomOut();     // 缩小
		// pdfh5.setScale(2.0);  // 设置缩放比例

		// 滚动控制示例
		// pdfh5.scrollToTop(); // 滚动到顶部

		// 搜索功能示例
		// pdfh5.searchText("关键词");  // 搜索文本
		// pdfh5.findNext();           // 查找下一个
		// pdfh5.findPrevious();       // 查找上一个
		// pdfh5.clearSearch();        // 清除搜索

		// 下载和打印示例
		// pdfh5.downloadPDF("我的文档.pdf");  // 下载PDF
		// pdfh5.printPDF();                  // 打印PDF

		// 显示/隐藏控制示例
		// pdfh5.show();    // 显示PDF
		// pdfh5.hide();    // 隐藏PDF

		// 交互控制示例
		// pdfh5.setZoomEnabled(false);   // 禁用缩放
		// pdfh5.setScrollEnabled(false); // 禁用滚动

		// ========== 分段加载方法示例 ==========

		// 设置分段加载配置
		// pdfh5.setProgressiveLoading(true, {
		//     chunkSize: 131072,      // 128KB分块
		//     maxMemoryPages: 8       // 最大8页内存
		// });

		// 获取分段加载状态
		// var status = pdfh5.getProgressiveLoadingStatus();
		// console.log("分段加载状态:", status);

		// 获取内存使用情况
		// var usage = pdfh5.getMemoryUsage();
		// console.log("内存使用:", usage);

		// 缩放控制方法
		// pdfh5.setZoomConstraints({minScale: 0.5, maxScale: 3.0}); // 设置缩放范围
		// var constraints = pdfh5.getZoomConstraints(); // 获取缩放范围
		// var isZooming = pdfh5.isZooming(); // 检查是否正在缩放

		// 状态获取示例
		// var status = pdfh5.getStatus();  // 获取当前状态
		// console.log("当前状态：", status);

		// 销毁示例
		// pdfh5.destroy();  // 销毁PDF实例

		// ========== 分段加载模式测试 ==========
		// 当前配置：分段加载模式已启用
		// 测试功能：
		// 1. 页面容器初始化 ✓（复用懒加载的createPageContainer）
		// 2. 渐进式页面加载 ✓（使用renderPageLazy）
		// 3. 内存管理 ✓（自动清理远距离页面）
		// 4. goto配置支持 ✓（优先加载goto页面）
		// 5. 手势缩放支持 ✓（与分段加载兼容）


		// ========== 服务端配置说明 ==========
		// 分段加载需要服务端支持HTTP范围请求（Range Requests）
		//
		// 完整的Nginx配置示例：
		// server {
		//     listen 80;
		//     server_name your-domain.com;
		//
		//     # 处理OPTIONS预检请求
		//     location / {
		//         if ($request_method = 'OPTIONS') {
		//             add_header Access-Control-Allow-Origin "*";
		//             add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
		//             add_header Access-Control-Allow-Headers "Range, Content-Range, Content-Type";
		//             add_header Access-Control-Max-Age 86400;
		//             add_header Content-Length 0;
		//             add_header Content-Type text/plain;
		//             return 204;
		//         }
		//     }
		//
		//     # PDF文件特殊配置
		//     location ~* \.(pdf)$ {
		//         add_header Accept-Ranges bytes;
		//         add_header Content-Type application/pdf;
		//         add_header Access-Control-Allow-Origin "*";
		//         add_header Access-Control-Allow-Methods "GET, HEAD, OPTIONS";
		//         add_header Access-Control-Allow-Headers "Range, Content-Range, Content-Type";
		//         add_header Access-Control-Expose-Headers "Content-Range, Content-Length";
		//     }
		// }



		// 注意：PDF.js 5.4.296 版本只支持 Canvas 渲染模式
		// 支持在线预览：http://pdfh5.gjtool.cn/pdfh5/pdf.html?file=http://pdfh5.gjtool.cn/pdfh5/git.pdf

	</script>
</body>

</html>